<template>
  <div class="account-list" >
      <search
          :showAdd="true"
          :showAdvSearch="false"
          :isReloadIvr="false"
          :isShowInput="false"
          :count="count"
          :currentPage="currentPage"
          :totalPage="Math.ceil(count / 10)"
          @turnPage="turnPage"
          @add="add"
          @refresh="refresh"
      ></search>
     <el-table :data="tableData">
         <el-table-column prop="name" :label="$t('configLazyLoad.channel.CustomerAccount')">
        </el-table-column>
         <el-table-column :label="$t('public.operate')">
          <template scope="scope">
            <el-button
              @click="edit(scope.row)"
              type="text"
              size="small"
              class="update">
              {{$t('public.edit')}}
            </el-button>
            <el-button
              @click="del(scope.row)"
              type="text"
              size="small" class="del">
              {{$t('public.delete')}}
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog :visible="dialogVisible"  :title="title" :before-close="handleClose">
        <updateWXCustomer @back="back" :data="updateData" :list="data"
        ref="updateWXCustomer" :corpid="corpid"></updateWXCustomer>
      </el-dialog>
  </div>
</template>
<script>
import search from '../base/search.vue'
import updateWXCustomer from './updateWXCustomer.vue'
import { deepClone } from '@/utils/m7Utils'
export default {
  name: 'authorization',
  props:{
    data:{
      type: Array,
      default:()=>[]
    },
    corpid: {
      type: String,
      default:''
    }
  },
  data () {
    return {
      count: 0,
      tableData: [],
      currentPage: 1,
      updateData: {},
      listData:[],
      dialogVisible:false,
      title: this.$t('public.add'),
      type:'add'
    }
  },
  methods: {
    addAuthorization () {
      this.$store.dispatch('getWxkfAuthUrl', {}).then(req => {
        if (req && req.success) {
          window.open (req.wxkfAuthUrl, '_blank') 
          console.log(req)
        }
      })
    },
    add(){
      this.title = this.$t('public.add')
      this.updateData = {}
      this.dialogVisible = true
      this.$nextTick(()=>{
        this.$refs.updateWXCustomer.update(this.updateData)
      })
    },
    edit(row){
      var data = deepClone(row)
      if (data.open_kfid) {
        this.dialogVisible = true
        this.updateData = deepClone(data)
        this.title = this.$t('public.edit')
        this.$nextTick(()=>{
          this.$refs.updateWXCustomer.update(this.updateData)
        })
      }
    },
    del(row){
      this.$confirm(this.$t('configLazyLoad.channel.deleteWXkfTip'), this.$t('public.tip'), {
        confirmButtonText: this.$t('public.confirm'),
        cancelButtonText: this.$t('public.cancel'),
        cancelButtonClass: 'primary_btn',
        confirmButtonClass: 'primary_btn',
        type: 'warning'
      }).then(() => {
        let dataNew = {
          corpid: this.corpid,
          openKfid: row.open_kfid
        }
        this.$store.dispatch('deleteWxkfAccount', dataNew).then((res) => {
          if (res && res.success) {
            this.$message.success(this.$t('config.channel.deleteSuccess'))
            this.fetchData(row.open_kfid)
          } else {
            this.$message.error(this.$t('config.channel.deleteFailure'))
          }
        })
      })
    },
    handleClose(){
        this.dialogVisible = false
    },
    turnPage (val) {
      this.currentPage = val
      this.fetchData()
    },
    refresh(){
      this.fetchData()
    },
    fetchData (val) {
      if(val){
        this.data.forEach((item,index)=>{
          if(item.open_kfid === val) {
            this.data.splice(index,1)
          }
        })
      }
      this.count = this.data.length
      // 最大页数
      let maxPage = Math.ceil(this.count / 10 )
      if (this.currentPage > maxPage) {
        this.currentPage = maxPage
      }
      this.tableData = this.getTableData(this.data)
    },
    getTableData (data) {
      let arr = []
      let allList = deepClone(data)
      let startNum = (this.currentPage - 1) * 10
      let endNum = this.currentPage * 10
      allList.forEach((item, index) => {
        if (index >= startNum && index < endNum) {
          arr.push(item)
        }
      })
      return arr
    },
    back (data,type) {
      if(type === 'add') {
        this.data.push(data)
      } else {
        this.data.forEach((item,index)=>{
          if(item.open_kfid === data.open_kfid) {
            this.data.splice(index,1,data)
          }
        })
      }
      this.fetchData()
      this.currentStep = "begin"
      this.updateData = {}
      this.dialogVisible = false
    }
  },
  components: {
    search,
    updateWXCustomer
  },
  mounted () {
    this.fetchData()
  },
}
</script>
<style lang="stylus" scoped>
  @import "../../../../../assets/common.styl"
  .account-list
    height calc(100vh - 270px)
    overflow-y auto
    text-align center
    padding 20px 0
    .before-begin
      margin 25px
      background #f2f6fa
      >p
        margin-bottom 34px
        font-size 14px
        line-height 18px
      .el-button
        margin-bottom 28px
      .wxkf-logo
        padding 34px 0 10px 0
        display table
        margin 0 auto
        span
          display table-cell
          vertical-align middle
          margin-left 10px
          p
            line-height 1.8
            margin-left 14px
            text-align left
    .editCustomer
      padding 20px
      .title
        font-size 24px
        font-weight 700px
        margin 20px 0
      .wechatType
        padding 20px
        text-align: center
        .wechatoption
          text-align left
          width 140px
          display inline-block
          p
            color $cf-gray4
            padding-left 20px
  .WXOfficial_hint
    text-align left
    display inline-block
    margin-bottom 20px
  .update
    max-width 100px
    overflow hidden
    text-overflow ellipsis
    white-space nowrap
  .del
    color $c-pink
    cursor pointer
</style>